<template>
  <section class="organization_chart_header">
    <div class="organization_chart_header__left">
      <span>组织：</span>
      <el-select :value="orgSelected"
                 @change="handleOrgChange"
                 placeholder="请选择"
                 class="w160">
        <el-option v-for="item in organizationOptions"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value"></el-option>
      </el-select>
    </div>
    <div class="organization_chart_header__right">
      <el-button type="primary"
                 @click="handleGoToHistory">查看变更历史</el-button>
    </div>
  </section>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "organizationChartHeader",
  data () {
    return {
    }
  },
  computed: {
    ...mapGetters({
      organizationOptions: "organizationChart/organization",
      orgSelected: "organizationChart/orgSelected"
    })
  },
  methods: {
    ...mapActions({
      setOrgSelected: "organizationChart/setOrgSelected"
    }),
    handleGoToHistory () {
      this.$router.push({ name: 'organizationChangeHistory' })
    },
    handleOrgChange (val) {
      this.setOrgSelected(val)
    }
  }
};
</script>
<style lang="scss" scoped>
.organization_chart_header {
  overflow: hidden;
}
.organization_chart_header__left {
  float: left;
  & > span {
    font-size: 14px;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
  }
}

.organization_chart_header__right {
  float: right;
}
</style>
